<script lang="jsx" setup>
const list = defineModel('list', { type: Array, default: [] });
</script>

<template>
  <div class="tabs-table">
    <table v-if="list.length" class="h-full w-100% table text-center text-28px font-bold">
      <thead class="thead">
        <tr>
          <th>层</th>
          <th>类型</th>
          <th class="border-right min-w-215px">PNL码</th>
          <th class="border-right">生产型号</th>
          <th class="w-240px">状态</th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr
          v-for="item in list"
          :key="item.showIndex"
          :style="{ background: item.data1 == '芯板' ? 'rgba(0,128,0,0.3)' : '' }"
        >
          <td>{{ item.showIndex }}</td>
          <td>{{ item.data1 }}{{ item.data1 == '芯板' ? item.data4 : '' }}</td>
          <td class="border-right">
            <span v-if="item.pnlCode">
              {{ item.pnlCode }}
            </span>
          </td>
          <td class="border-right">
            <span v-if="item.data1 == '芯板'">
              {{ item.proNoBase }}
            </span>
          </td>
          <td class="h-full flex-center pr-10px">
            <template v-if="item.pnlCode">
              <template v-if="item.state === 1">
                <div class="border-radius-50 wikn h50px w-50px bg-green">OK</div>
              </template>
              <template v-if="item.state === 0">
                <div class="border-radius-50 wikn h50px w-50px bg-red">NG</div>
              </template>
            </template>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-else class="no-data h-full w-full flex-center"><AEmpty description="暂无层叠数据" /></div>
  </div>
</template>

<style lang="scss" scoped>
.border-radius-50 {
  border-radius: 50%;
}
</style>
